<template>
  <template v-for="(item, index) in menuList" :key="index">
    <template v-if="item.children">
      <el-sub-menu
        class="layout-side-sub-item"
        :key="item.id"
        :index="item.menu_path"
      >
        <template #title>
          <i class="icon mr10" v-if="item.icon" :class="item.icon"></i>
          <span>{{ item.menu_name }}</span>
        </template>
        <LayoutSideMenu
          :data="item.children"
          :name="item.menu_name"
        ></LayoutSideMenu>
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item
        :key="item.id"
        :route="item.menu_path + (item.params ? '?' + item.params : '')"
        class="layout-side-item"
        :class="
          cur.path == item.menu_path ||
          item.menu_path == $utils.getMenuString(cur.path) ||
          $utils.getMenuActionParent(item,cur.path)
            ? 'is-active'
            : ''
        "
        v-permission="item.menu_node"
        @click="getPath(item)"
        :index="item.menu_path"
      >
        <i class="icon" v-if="item.icon" :class="item.icon"></i>
        <span class="layout-side-item-title ml10">{{ item.menu_name }}</span>
      </el-menu-item>
    </template>
  </template>
</template>
<script lang="ts">
export default {
  name: "LayoutSideMenu",
};
</script>
<script setup  lang="ts">
import { defineProps, ref, getCurrentInstance,onMounted,watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMenus } from "@/store";
import LayoutSideMenu from "./LayoutSideMenu.vue";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const MenusStore = useMenus();

const router = useRouter();
const route = useRoute();

const cur = ref<any>(router.currentRoute);
const props = withDefaults(
  defineProps<{
    data?: any;
    name?: string;
  }>(),
  {
    data: [],
    name: "",
  }
);

const menuList = ref<any>(props.data);

const getPath = (menu: any) => {
  router.push({
    path: menu.menu_path,
    query: menu.url_params || {},
  })
};
watch(
  () => router.currentRoute.value.path,
  (val) => {
    cur.value.path = val;
  },
  { deep: true }
);

onMounted(()=>{
})
</script>
<style>
.layout-side-item {
  margin: 5px 10px;
  /* height: 40px; */
  min-width: 100px !important;
  border-radius: 2px;
}
.layout-side-sub-item > div {
  margin: 0 10px;
  /* height: 40px; */
}
.layout-side-item.is-active {
  background-color: var(--el-color-primary-light-9);
}
</style>